<template>
	<view class="page-content">
		<view class="select-box">
			<view class="flex-start mb-8" style="font-size: 14px;">
				票务卡：{{ticketInfo.name}}
			</view>
			<view class="flex-start mb-8" style="align-items: center;font-size: 14px;">
				<text>筛选场次：</text>

				<uni-data-select v-model="sitevalue" :localdata="range" @change="selectChange"></uni-data-select>

			</view>
			<view class="flex-start mb-8" style="color:#D43030;font-weight: 600;">
				本场售票：{{ticketInfo.num}}
			</view>
			<view class="flex-between" style="color:#D43030;font-weight: 600;">
				<text>
					扣卡金额：￥{{ticketInfo.balance}}
				</text>
				<view style="flex:1;text-align: right;">
					鱼获汇总：￥{{ticketInfo.total}}
				</view>
			</view>
		</view>
		
		<view class="btn-box">
			<view class="default-btn" :class="activeName=='已售票'?'active-btn':''" style="margin-right:20px" @click="clickType('已售票')">
				已售票<text style="margin-left: 5px;">{{sellTickettNum}}</text>
			</view>
			<view class="default-btn" :class="activeName=='已退票'?'active-btn':''" @click="clickType('已退票')">
				已退票<text style="margin-left: 5px;">{{returnTicket}}</text>
			</view>
		</view>
		
		<view class="list-box">
			<view class="list-item" v-for="(item,index) in listData" :key="index">
				<view class="flex-between" style="align-items: center;padding: 20px;padding-bottom: 0;">
					<view class="flex-start">
						<image src="../../../static/wallet/tick.png" mode="" style="width: 20px;height: 19px;margin-right: 5px;"></image>
						<text>鱼票</text>
					</view>
					<view class="red-word">
						鱼获详情
					</view>
				</view>
				<view class="line">
					
				</view>
				<view class="content-word">
					<view class="flex-start" style="align-items: center;">
						<image src="../../../static/wallet/avatar.png" mode="" style="width: 13px;height: 13px;margin-right: 5px;"></image>
						<text>{{item.name}}</text>
					</view>
					<view class="flex-start" style="align-items: center;">
						<image src="../../../static/wallet/phone.png" mode="" style="width: 11px;height: 11px;margin-right: 5px;"></image>
						<text>{{item.phone}}</text>
					</view>
					<view class="flex-start" style="align-items: center;">
						<text>开票人：</text>
						<text>{{item.ticket}}</text>
					</view>
					<view class="flex-start" style="align-items: center;">
						<text>开票时间：</text>
						<text>{{item.time}}</text>
					</view>
				</view>
				<view class="red-bg">
					<view>
						<text>扣卡金额：￥{{item.balance}}</text>
					</view>
					<view>
						<text>鱼获金额：￥{{item.fish_balance}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				sitevalue: '',
				ticketInfo:{
					name:"老墨鱼票",
					site:0,
					num:4,
					balance:1267.20,
					total:678.76
				},
				sellTickettNum:3,
				returnTicket:1,
				activeName:'已售票',
				
				listData:[
					{name:'王老三',phone:'12634545789',ticket:'老莫',
					time:'2024-07-28 07:57',balance:'422.10',fish_balance:'98.10'
					}
				]
				
			}
		},
		methods: {
			clickType(type){
				this.activeName=type
			},
			selectChange(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
.flex-between{
	display: flex;
	justify-content: space-between;
}
.page-content{
	background: #F3F4F6;
	height: calc(100vh - 44px);
}
.select-box{
	background: #fff;
	padding: 15px 20px;
	margin-bottom: 15px;
}
.mb-8{
	margin-bottom: 8px;
}
.default-btn{
	background:#A6A6A6;
	font-size: 14px;
	color: #fff;
	padding: 10px 15px;
	border-radius: 10px;
}
.active-btn{
	background: #EB5757;
}
.btn-box{
	display: flex;
	justify-content: flex-end;
	margin-bottom: 15px;
}
.red-word{
	color: #D43030;
}
.line{
	margin-top: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid #f0f0f0;
}
.content-word{
	font-size: 14px;
	color: #000;
	margin-bottom: 10px;
	padding: 5px 20px;
}
.red-bg{
	background: #FAEAEA;
	text-align: right;
	padding: 15px;
}
.list-item{
	background: #fff;
	overflow: hidden;
	border-radius: 10px;
	margin: 0 5px 15px;
}
</style>